{extend name="./app/admin/view/main.html" /}
{block name="title"}熊掌号信息设置 - {__block__}{/block}
{block name="style"}
<style>
</style>
{/block}

{block name="main"}
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">熊掌号</h4> <h5 class="sub-title">开发者设置</h5>
    </div>
</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">

<section class="mip-box">
    <section class="mip-box-heading">
        <h3>熊掌号开发信息</h3>
    </section>
    <section class="mip-box-body">
        <div class="row">
            <div class="col-md-6">
                <i-form label-position="top">
                    <Form-Item label="开发者ID ClientId【baiduXZClientId】">
                        <i-input v-model="setting.baiduXZClientId"></i-input>
                    </Form-Item>
                    <Form-Item label="开发者密码 ClientSecret【baiduXZClientSecret】">
                        <i-input :type='password' v-model="setting.baiduXZClientSecret">
                             <i-Button slot="append" @click='show'>切换显示状态</i-Button>
                        </i-input>
                    </Form-Item>
                    <Form-Item label="网页授权域名【baiduXZRedirectUri】">
                        <i-input v-model="setting.baiduXZRedirectUri"></i-input>
                    </Form-Item>
                </i-form>
                <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click='onSubmitSetting'>
                    <span>请先点击保存</span>
                </button>
                            
                <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click='test'>
                    <span>测试配置信息</span>
                </button>
            </div>
            <div class="col-md-6">
                <i-form label-position="top">
                    <Form-Item label="备注说明：">
                        <b>熊掌号开发信息：</b>登录
                        <a target="_blank" href="https://xiongzhang.baidu.com/site">搜索资源平台 - 熊掌号</a> 的
                        <a target="_blank" href="https://xiongzhang.baidu.com/site/devsetting">开发设置</a> 中，
                        获取开发者ID，设置开发者密码，填写网站授权域名。<br><br>
                    </Form-Item>
                </i-form>

            </div>
        </div>
    </section>
</section>

<section class="mip-box">
    <section class="mip-box-heading">
        <h3>熊掌号服务器配置</h3>
    </section>
    <section class="mip-box-body">
        <div class="row">
            <div class="col-md-6">
                <i-form label-position="top">
                    <Form-Item label="令牌 Token【baiduXZToken】">
                        <i-input v-model="setting.baiduXZToken"></i-input>
                    </Form-Item>
                </i-form>
                <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-circle" @click='onSubmitSetting'>
                    <span>立即保存</span>
                </button>
            </div>
            <div class="col-md-6">
                <i-form label-position="top">
                    <Form-Item label="备注说明：">
                        <b>熊掌号服务器配置：</b>登录
                        <a target="_blank" href="https://xiongzhang.baidu.com/site">搜索资源平台 - 熊掌号</a> 的
                        <a target="_blank" href="https://xiongzhang.baidu.com/site/devsetting">开发设置</a> 中，
                        在服务器设置中点击<a target="_blank" href="https://xiongzhang.baidu.com/site/devsetting?action=modify">“修改配置”</a>。<br>
                        填写Url：   {$mipInfo.domain}/xiongZhang/ApiUserXiongZhang/configAccess<br>
                        填写Token：  {{setting.baiduXZToken}} <br>
                        Encoding AESKey： 随机生成即可<br>
                        消息加密方式：推荐采用安全模式<br>
                        数据格式：采用json<br>
                    </Form-Item>
                </i-form>

            </div>
        </div>
    </section>
</section>
</main>
{/block}
    
{block name="javascript"}
{__block__}
<script>
    new Vue({
        el: '#app',
        data: {
            setting: {},
            password: 'password',
            xzCodeDemo: 'https://xiongzhang.baidu.com/site/devsetting',
            codeUrl: 'http://域名/xiongZhang/ApiUserXiongZhang/configAccess',
        },
        watch: {
        },
        mounted() {
            
            this.getSettingData();
        },
        methods: {
            test() {
                this.$mip.ajax('{$mipInfo.domain}/xiongzhang/ApiAdminXiongZhangSetting/testKey', {
                }).then(res => {
                    if(res.code == 1) {
                        this.$Message.success(res.msg);
                    }
                });
            },
            show() {
                if (this.password) {
                    this.password = '';
                } else {
                    this.password = 'password';
                }
            },
            onSubmitSetting: function() {
                this.$mip.ajax('{$mipInfo.domain}/xiongzhang/ApiAdminXiongZhangSetting/settingEdit', {
                    setting: JSON.stringify(this.setting),
                }).then(res => {
                    if(res.code == 1) {
                        this.$Message.success('保存成功');
                        this.getSettingData();
                    }
                });
            },
            getSettingData: function() {
                this.loading = true;
                this.$mip.ajax('{$mipInfo.domain}/xiongzhang/ApiAdminXiongZhangSetting/settingList', {

                }).then(res => {
                    this.loading = false;
                    if(res.code == 1) {
                        var temp = res.data;
                        if(temp.baiduXZToken == ''){
                            var rnd = '';
                            var str='abcdefghijklmnopqrstuvwxyzAbcDfGijKnMnopqrStuvvxYZ0123456789';
                            for(var i=0;i<32;i++){
                                var c = str.substr(Math.random()*(str.length),1);
                                rnd+=c;
                            }
                            temp.baiduXZToken = rnd
                        }
                        this.setting = temp;
                    }
                });
            },

        }
    })
  </script>
{/block}